<template>
    <div class="header">
        <slot name="back" >
            <span class="back"></span>
        </slot>
        <slot name="title">
            <h1>猫眼电影</h1>
        </slot>
        <div class="nav">
            <!-- 这样的方式只能是点这个显示隐藏，但是点外面不能控制隐藏，所以涉及到跨组件的通信，所以可以考虑使用vuex -->
            <!-- 阻止冒泡，因为点其他地方也要把这个隐藏起来--这个放在最外层的myhome页面去做，如果不阻止，这里点了又被冒泡关了 -->
            <span @click.stop="changeShowNav()">...</span>
            <!-- 二级菜单 -->
            <ul v-show="showNav">
                <li @click="go('/index/movies/hotShow')">电影</li>
                <li @click="go('/index/theater')">影院</li>
                <li @click="go('/index/profile')">我的</li>
            </ul>
        </div>
    </div>
</template>

<script>
// 导入mapstate和mutationState -- 展开的时候要么用对象的形式，要么，用数组的形式
import {mapState,mapMutations} from 'vuex'

export default {
    data(){
        return{
            // 不在这里定义了，转移到Vuex中去控制
            // showNav:false
        }
    },
    computed:{
        // 将state中的showNav放到这里去使用--注意这里不能写成这种：...mapState({showNav})
        ...mapState(['showNav']),
        // 两种方式都可以
        // ...mapState({showNav:'showNav'})
    },
    // // 或者这样
    // computed:mapState({
    //     // 箭头函数可使代码更简练
    //     count: state => state.count,

    //     // 传字符串参数 'count' 等同于 `state => state.count`
    //     countAlias: 'count',

    //     // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    //     countPlusLocalState (state) {
    //     return state.count + this.localCount
    //     }
    // }),
    // computed:mapState(['showNav'])
    methods:{
        // 同样将mutation中的方法混入到这里相当于 this.$store.changeShowNav()
        ...mapMutations(['changeShowNav']),
        // 路径跳转
        go(url){
            this.$router.push(url);
        }
    }
}
</script>

<style lang="scss" scoped>
    .header{
        font-family: PingFangSC-Regular,Hiragino Sans GB,sans-serif;
        height: 50px;
        background-color: #e54847;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: center;
        h1{
            color: #fff;
            flex: 1;
            font-size: 18px;
            font-weight: 300;
        }
        .nav,
        .back{
            width: 50px;
            font-size: 25px;
            color: #fff;
            height: 50.5px;
            line-height: 38px;
            position: relative;
            ul{
                position: absolute;
                top: 46px;
                right: 12px;
                z-index: 20;
                background-color: #fff;
                width: 110px;
                color: #000;
                font-size: 14px;
                box-shadow: -1px 3px 9px 0px #0000001a;
                li{
                    text-align: center;
                    border-bottom: 0.5px solid #f0f0f0;
                    height: 45.5px;
                    color: #333;
                    font-size: 15px;
                    line-height: 45.5px;
                }
            }
        }
    }
</style>